<!DOCTYPE html>
<html style="height: 100%;width:100%">
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>

	<body style="height: 100%; width:100%">
		<div id="chart-panel" style="height: 100%; width:80%"></div>
	</body>
	<script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@5.2.2/dist/echarts.min.js"></script>
	<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
	<script>
		var dom = document.getElementById("chart-panel");
		var myChart = echarts.init(dom);
		let yp1arr = [];
		let yp2arr = [];
		let yp3arr = [];
		let xarr = ['1001',
			'1002', '1003', '1004',
			'1005', '1006', '1007', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10',
			 '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23',
			'24', '25', '26', '27',
			'855', '67867', '545', '454', '567567', '56756', 'khjh', '神鼎飞丹砂是的', '8988', '999', '0909', '45645',
			'3243', 'ghf', 'yhyh', '7867', 'hgfhfg', 'ddf', '3243wer', 'ghfrete', '苏苏1', '苏苏2', '苏苏13',
			'苏苏144',
		];
		let max = 300,
			min = 10;
		var option;
		yp1arr = [777,
			200, 300, 400,
			300, 200, 100, 100, 200, 300, 400, 300, 200, 100, 100, 200, 300, 400, 300, 200,
			100, 100, 200, 300, 400, 300, 200, 100, 100, 200, 300, 400, 300, 200, 100, 100, 200, 300, 400, 300, 200, 100,
			100, 200, 300, 400, 300, 200, 100, 100, 200, 300, 400, 300, 200, 100, 100, 200, 300,
		];
		yp2arr = [666,
			200, 300, 400,
			300, 200, 100, 100, 200, 300, 400, 300, 200, 100, 100, 200, 300, 400, 300, 200,
			100, 100, 200, 300, 400, 300, 200, 100, 100, 200, 300, 400, 300, 200, 100, 100, 200, 300, 400, 300, 200, 100,
			100, 200, 300, 400, 300, 200, 100, 100, 200, 300, 400, 300, 200, 100, 100, 200, 300,
		];
		yp3arr = [1111,
			200, 300, 400,
			300, 200, 100, 100, 200, 300, 400, 300, 200, 100, 100, 200, 300, 400, 300, 200,
			100, 100, 200, 300, 400, 300, 200, 100, 100, 200, 300, 400, 300, 200, 100, 100, 200, 300, 400, 300, 200, 100,
			100, 200, 300, 400, 300, 200, 100, 100, 200, 300, 400, 300, 200, 100, 100, 200, 300,
		];
		let zoomShow = false;
		if (yp1arr.length + yp2arr.length + yp3arr.length > 14) {
			zoomShow = true;
		} else {
			zoomShow = false;
		}
		option = {
			backgroundColor: '#222',
			title: {
				show: true,
				text: "11111",
				x: "center",
				y: "top",
				padding: [50, 20, 50, 50],
				textStyle: {
					fontFamily: "Arial, Verdana, sans...",
					fontSize: 20,
					color: "#fff",
					fontStyle: "normal",
					fontWeight: "normal",
				},
			},
			tooltip: {
				trigger: 'item',
			},

			grid: {
				left: "5%",
				right: "5%",
				bottom: "4%",
				top: "15%",
				containLabel: true,
			},
			legend: {
				//图例组件，颜色和名字
				right: "5%",
				top: "5%",
				selectedMode: true,
				data: ["正常", "报警"],
				textStyle: {
					color: "rgba(255,255,255,0.74)",
					fontStyle: "normal",
					fontFamily: "微软雅黑",
					fontSize: 12,
				},
			},

			xAxis: [{
				type: "category",
				boundaryGap: true, // x轴两边是否留白 设置为false代表是零刻度开始，设置为true代表离零刻度间隔一段距离
				data: xarr, //X轴支架编号
				offset: '10px',
				axisLabel: {
					color: "rgba(255, 203, 12, 0.7)",
					fontSize: '14',
					interval: 0,
					rotate: 40,
					margin: 10,
				},
				axisTick: {
					//坐标轴刻度相关设置。
					show: false,
				},
				axisLine: {
					show: true,
					//坐标轴轴线相关设置
					lineStyle: {
						color: "rgba(255,255,255,0.4)",
					},
				},
				// interval: 1, // 步长
				// min: 10, // 起始
			}, ],
			yAxis: [{
				onZero: false,
				// interval: 1, // 步长
				// min: 0, // 起始
				type: "value",
				splitNumber: 5,
				axisLabel: {
					color: "rgba(255, 255, 255, 0.74)",
					fontStyle: "normal",
					fontFamily: "微软雅黑",
					fontSize: 14,
				},
				axisLine: {
					show: true,
					lineStyle: {
						color: "#636E7C",
					},
					onZero: false // y轴是否在x轴0刻度上
				},
				axisTick: {
					show: false,
				},
				splitLine: {
					show: true,
					lineStyle: {
						color: "#fff",
						opacity: 0.06,
					},
				},
			}, ],
			dataZoom: [ //滚动条
				// {
				// 	show: zoomShow,
				// 	type: 'slider',
				// 	realtime: true,
				// 	startValue: 0,
				// 	endValue: 14,
				// 	xAxisIndex: [0],
				// 	bottom: '10',
				// 	left: '5%',
				// 	height: 10,
				// 	borderColor: 'rgba(0,0,0,0)',
				// 	textStyle: {
				// 		color: 'orange',
				// 	},
				// },
				{
					show: zoomShow,
					type: 'inside',
					realtime: true,
					startValue: 0,
					endValue: 14,
					xAxisIndex: [0],
					bottom: '10',
					left: '30',
					height: 10,
					borderColor: 'orange',
					textStyle: {
						color: '#05D5FF',
					},
				},

			],
			// dataZoom: [{
			// 	type: 'inside',
			// 	start: 0,
			// 	end: 100
			// }, {
			// 	start: 0,
			// 	end: 10,
			// 	handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
			// 	handleSize: '80%',
			// 	handleStyle: {
			// 		color: '#fff',
			// 		shadowBlur: 3,
			// 		shadowColor: 'rgba(0, 0, 0, 0.6)',
			// 		shadowOffsetX: 2,
			// 		shadowOffsetY: 2
			// 	}
			// }],
			series: [
				//p1
				{
					name: "正常",
					type: "pictorialBar",
					color: "#00eded",
					symbolSize: [24, 10],
					// symbolOffset: [0, -5],
					symbolOffset: [-24, -5],
					symbolPosition: "end",
					z: 12,
					// "barWidth": "0",barGap
					label: {
						show: true,
						offset: [-24, 0],
						position: "top",
						textAlign: "left",
						formatter: function(data) {
							if (data.value === 0) {
								return "";
							}
							return data.value;
						},
						fontSize: 12,
						color: "#fff",

					},
					itemStyle: {
						show: true,
						color: function(params) {
							var index_num = params.value;
							for (var i = 0; i < yp1arr.length; i++) {
								//判断数据是否大于max
								if (parseFloat(index_num) >= parseFloat(max)) {
									return "rgba(208, 59, 50, 0.7)";
									// } else if (parseFloat(index_num) < parseFloat(min)) {
									//   return "rgba(0, 255, 244, 0.7)";
								} else {
									return "rgba(0, 255, 244, 0.7)";
								}
							}
						},

					},
					data: yp1arr, //p1值
				},
				{
					name: "正常",
					type: "bar",
					data: yp1arr, //p1值
					barWidth: 24,
					// barGap: 24, //柱间距离
					// barGap: '-100%',
					// barGap: '80%',
					/*多个并排柱子设置柱子之间的间距*/
					// barCategoryGap: '50%',
					/*多个并排柱子设置柱子之间的间距*/
					itemStyle: {
						show: true,
						//每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
						color: function(params) {
							// return 'orange';
							var index_num = params.value;
							for (var i = 0; i < yp1arr.length; i++) {
								//判断数据是否大于max
								if (parseFloat(index_num) >= parseFloat(max)) {
									// return "#f98c77";
									return (params.color = {
										x: 0,
										y: 1,
										x2: 0,
										y2: 0,
										colorStops: [{
												offset: 0,
												color: "rgba(208, 59, 50, 0.11)", // 0% 处的颜色
											},
											{
												offset: 1,
												color: "rgba(208, 59, 50, 0.7)", // 100% 处的颜色
											},
										],
										global: false, // 缺省为 false
									});

								} else {
									return (params.color = {
										x: 0,
										y: 1,
										x2: 0,
										y2: 0,
										colorStops: [{
												offset: 0,
												color: "rgba(0, 255, 244, 0.7)", // 0% 处的颜色
											},
											{
												offset: 1,
												color: "rgba(0, 255, 244, 0.7)", // 100% 处的颜色
											},
										],
										global: false, // 缺省为 false
									});
								}
							}
						},
						opacity: 0.8,

					},
				},
				//p2
				{
					name: "报警", //头部
					type: "pictorialBar",
					color: "#e00000",
					symbolSize: [24, 10],
					// symbolOffset: [24, -5],
					symbolOffset: [0, -5],
					z: 12,
					symbolPosition: "end",
					label: {
						offset: [0, 0],
						show: true,
						position: "top",
						// "formatter": "{c}%",
						fontSize: 12,
						color: "#fff",
						formatter: function(data) {
							if (data.value === 0) {
								return "";
							}
							return data.value;
						},

					},
					itemStyle: {
						show: true,
						color: function(params) {
							var index_num = params.value;
							for (var i = 0; i < yp2arr.length; i++) {
								//判断数据是否大于max
								if (parseFloat(index_num) >= parseFloat(max)) {
									return "rgba(208, 59, 50, 0.7)";
									// } else if (parseFloat(index_num) < parseFloat(min)) {
									//   return "rgba(0, 255, 244, 0.7)";
								} else {
									return "rgba(0, 255, 244, 0.7)";
								}
							}
						},

					},
					//  color: "rgba(208, 120, 50, 0.7)",
					data: yp2arr, //p2值
				},
				{
					name: "报警",
					type: "bar",
					barWidth: 24,
					barGap: '0%',
					z: 12,
					itemStyle: {
						//每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
						color: function(params) {
							// return 'pink';
							var index_num = params.value;
							for (var i = 0; i < yp2arr.length; i++) {
								//判断数据是否大于max
								if (parseFloat(index_num) >= parseFloat(max)) {
									// return "#f98c77";
									return (params.color = {
										x: 0,
										y: 1,
										x2: 0,
										y2: 0,
										colorStops: [{
												offset: 0,
												color: "rgba(208, 59, 50, 0.11)", // 0% 处的颜色
											},
											{
												offset: 1,
												color: "rgba(208, 59, 50, 0.7)", // 100% 处的颜色
											},
										],
										global: false, // 缺省为 false
									});

								} else {
									return (params.color = {
										x: 0,
										y: 1,
										x2: 0,
										y2: 0,
										colorStops: [{
												offset: 0,
												color: "rgba(0, 255, 244, 0.11)", // 0% 处的颜色
											},
											{
												offset: 1,
												color: "rgba(0, 255, 244, 0.11)", // 100% 处的颜色
											},
										],
										global: false, // 缺省为 false
									});
								}
							}
						},
						opacity: 0.8,

					},
					data: yp2arr, //p2值
				},
				// //p3
				{
					name: "",
					type: "pictorialBar",
					symbolSize: [24, 10],
					symbolOffset: [24, -5],
					// symbolOffset: [48, -5],
					symbolPosition: "end",
					z: 12,
					// "barWidth": "0",barGap
					label: {
						offset: [24, 0],
						show: true,
						position: "top",
						formatter: function(data) {
							if (data.value === 0) {
								return "";
							}
							return data.value;
						},
						fontSize: 12,
						color: "#fff",

					},
					itemStyle: {
						show: true,
						color: function(params) {
							var index_num = params.value;
							for (var i = 0; i < yp3arr.length; i++) {
								//判断数据是否大于max
								if (parseFloat(index_num) >= parseFloat(max)) {
									return "rgba(208, 59, 50, 0.7)";
								} else if (parseFloat(index_num) < parseFloat(min)) {
									return "rgba(0, 255, 244, 0.7)";
								} else {
									return "rgba(208, 120, 50, 0.7)";
								}
							}
						},

					},
					// color: "rgba(208, 59, 50, 0.7)",
					data: yp3arr, //p3值
				},
				{
					name: "",
					type: "bar",
					data: yp3arr, //p3值
					barWidth: 24,
					// barGap: '100%', //柱间距离
					barGap: '0', //柱间距离
					itemStyle: {
						//每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
						color: function(params) {
							// return 'red'
							var index_num = params.value;
							for (var i = 0; i < yp3arr.length; i++) {
								//判断数据是否大于max
								if (parseFloat(index_num) >= parseFloat(max)) {
									// return "#f98c77";
									return (params.color = {
										x: 0,
										y: 1,
										x2: 0,
										y2: 0,
										colorStops: [{
												offset: 0,
												color: "rgba(208, 59, 50, 0.11)", // 0% 处的颜色
											},
											{
												offset: 1,
												color: "rgba(208, 59, 50, 0.7)", // 100% 处的颜色
											},
										],
										global: false, // 缺省为 false
									});
								} else if (parseFloat(index_num) < parseFloat(min)) {
									// return "#4ea9f8";
									return (params.color = {
										x: 0,
										y: 1,
										x2: 0,
										y2: 0,
										colorStops: [{
												offset: 0,
												color: "rgba(0, 255, 244, 0.11)", // 0% 处的颜色
											},
											{
												offset: 1,
												color: "rgba(0, 255, 244, 0.7)", // 100% 处的颜色
											},
										],
										global: false, // 缺省为 false
									});
								} else {
									return (params.color = {
										x: 0,
										y: 1,
										x2: 0,
										y2: 0,
										colorStops: [{
												offset: 0,
												color: "rgba(208, 120, 50, 0.11)", // 0% 处的颜色
											},
											{
												offset: 1,
												color: "rgba(208, 120, 50, 0.7)", // 100% 处的颜色
											},
										],
										global: false, // 缺省为 false
									});
								}
							}
						},
						opacity: 0.8,
					},
				},
			],

		};

		if (option && typeof option === 'object') {
			myChart.setOption(option);
		}
	</script>
</html>
